<script setup>
import {ref} from 'vue';
import {ElMessage} from "element-plus";
// 模拟聊天数据（保持不变）
const chats = ref([
  {
    id: 1,
    name: '桂林理工3班',
    avatar: 'https://picsum.photos/id/1/200',
    lastMessage: '明天下午3点有技术分享会，请大家准时参加',
    lastMessageSender: '王老师',
    lastMessageTime: '2025-08-20 14:30',
    unreadCount: 3,
    isGroup: true
  },
  {
    id: 2,
    name: '花开半夏',
    avatar: 'https://picsum.photos/id/2/200',
    lastMessage: '我已经完成了前端页面的设计，你看一下是否符合要求',
    lastMessageTime: '2025-08-20 10:15',
    unreadCount: 1,
    isGroup: false
  }
]);

// 格式化时间显示（保持不变）
const formatTime = (timeString) => {
  const date = new Date(timeString);
  const now = new Date();

  if (date.toDateString() === now.toDateString()) {
    return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
  }

  const yesterday = new Date(now);
  yesterday.setDate(now.getDate() - 1);
  if (date.toDateString() === yesterday.toDateString()) {
    return '昨天';
  }

  if (date.getFullYear() === now.getFullYear()) {
    return `${date.getMonth() + 1}月${date.getDate()}日`;
  }

  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};

// 处理选择聊天（保持不变）
const handleSelectChat = (chat) => {
  console.log('进入聊天:', chat.name);
  ElMessage.success(`进入与 ${chat.name} 的聊天`);
  chat.unreadCount = 0; /*消息全部已处理*/
};

// 处理添加新聊天（保持不变）
const handleAddChat = () => {
  ElMessage.info('打开新建聊天对话框');
};

/*//获取用户ID
const userID=localStorage.getItem('userId');
ElMessage.success("成功获取用户ID:"+userID)*/
</script>


<template>
  <el-container class="chat-container">
    <!-- 顶部导航栏 -->
    <el-header class="chat-header">
      <div class="header-content">
        <h4 class="page-title">微信</h4>
      </div>
    </el-header>

    <!-- 会话列表区域-->
    <el-main class="chat-list-container">
      <el-scrollbar v-if="chats.length > 0" class="chat-list">
        <!-- 直接渲染chat-item-->
        <div
            v-for="chat in chats"
            :key="chat.id"
            class="chat-item"
            @click="handleSelectChat(chat)"
        >
          <!-- 头像和未读标记 -->
          <div class="chat-item-avatar">
            <el-badge
                :value="chat.unreadCount"
                :is-dot="chat.unreadCount === 1 && !chat.isGroup"
                v-if="chat.unreadCount > 0"
                class="unread-badge"
            >
              <el-avatar :src="chat.avatar">
                <template #fallback>
                  {{ chat.name.substring(0, 2) }}
                </template>
              </el-avatar>
            </el-badge>
            <el-avatar :src="chat.avatar" v-else>
              <template #fallback>
                {{ chat.name.substring(0, 2) }}
              </template>
            </el-avatar>
          </div>

          <!-- 主要内容区域 -->
          <div class="chat-item-content">
            <div class="chat-info">
              <div class="chat-name-container">
                <span class="chat-name">{{ chat.name }}</span>
                <span class="chat-time">{{ formatTime(chat.lastMessageTime) }}</span>
              </div>
              <p class="last-message">
                <span v-if="chat.isGroup" class="group-sender">{{ chat.lastMessageSender }}: </span>
                {{ chat.lastMessage }}
              </p>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div v-else class="no-results">暂无会话</div>
    </el-main>
  </el-container>
</template>


<style scoped>
/* 样式保持不变（已优化手机模式显示） */
.chat-container {
  height: 100vh;
  overflow: hidden;
}

.chat-header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 0;
}

.header-content {
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.page-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.chat-list-container {
  padding: 0;
  overflow-y: auto;
  background-color: #f5f7fa;
}

.chat-list {
  background-color: #fff;
  height: 100%;
}

.chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.chat-item:hover {
  background-color: #f5f7fa;
}

.chat-item-avatar {
  flex-shrink: 0; /* 头像不收缩 */
}

.chat-item-content {
  flex: 1;
  min-width: 0; /* 允许内容区域收缩 */
}

.chat-info {
  width: 100%;
}

.chat-name-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  white-space: nowrap;
}

.chat-name {
  font-weight: 500;
  font-size: 15px;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-time {
  font-size: 12px;
  color: #909399;
  flex-shrink: 0;
  margin-left: 8px;
}

.last-message {
  margin: 0;
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-sender {
  color: #909399;
}

.unread-badge {
  --el-badge-background-color: #f56c6c;
}

.no-results {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #fff;
}

/* 新增：将头像改为带圆角的正方形 */
::v-deep .el-avatar {
  width: 50px !important;  /* 正方形宽度 */
  height: 50px !important; /* 正方形高度 */
  border-radius: 8px !important; /* 圆角大小，可调整 */
}

@media (max-width: 768px) {
  .chat-name {
    max-width: 50%;
  }

  .last-message {
    font-size: 13px;
  }
}
</style>
